<script>
import {defineComponent} from 'vue'
import {getTicketList, submitOperateRecord} from "@/api/api";

export default defineComponent({
    name: "walkTicket",
    data() {
        return {
            localwalkTicket:false,
            currentStyle:undefined,
            currentEvent:undefined,
            websocket:null,
            wxUrl:'',
            canWalk:false,
            eventList:[
            ],
            records:[],
            czpName:undefined
        }
    },
    methods:{
        close(){
            this.$emit('DialogClose')
        },
        ok(){
            if (!this.currentEvent){
                this.$message.error('请选择一个操作任务')
                return
            }
            if (!this.currentStyle){
                this.$message.error('请选择预演类型')
                return
            }
            if (!this.canWalk){
                this.$message.error('当前操作票不能进行预演')
                return
            }
            this.$emit('openWalkInfo',this.records,this.currentStyle)
            this.$emit('DialogClose')

        },
        websocketsend(messsage) {
            this.websocket.send(JSON.stringify(messsage))
        },
        initContent(val){
            this.records=this.eventList.find(item=>item.id===val).records
            this.czpName=this.eventList.find(item=>item.id===val).name
           this.records=this.records.map(item=>{
             return   {
                   recordDesc: item.recordDesc?item.recordDesc:'',
                   operateState: item.operateState?item.operateState:'',
                   operatePointName: item.operatePointName?item.operatePointName:'',
                   operateType:item.operateType
               }
           })
            this.canWalk=false
            this.records.forEach(item=>{
                if (item.operateType==="状态切换"){
                    this.canWalk=true
                    const info={"cmd":"getDeviceDataByStateDesc","deviceName":item.operatePointName};
                    this.websocketsend(info)
                }
            })

        },
        initWebSocket(){
            this.websocket = new WebSocket(this.wxUrl)
            this.websocket.onopen = this.setOnopenMessage
        },
        setOnopenMessage(){
           this.websocket.addEventListener('message', (e) => {
               const data=JSON.parse(e.data)
               if (data.cmd==='getDeviceDataByStateDesc'){
                   this.records.forEach(item=>{
                       if (item.operatePointName===data.data.state_desc){
                           item.jg_name=data.data.jg_name
                       }
                   })
               }
           })
        },
        async  initEventList(){
            const res= await  getTicketList({type:''})
          if (res.data.code===200){
              this.eventList=res.data.data
          }
        },
       async submitKey(){
            if (!this.currentEvent){
                this.$message.error('请选择一个操作任务')
                return
            }
            let log = {
                log_desc:`对${this.czpName}作业票进行传电脑钥匙操作`
            }
            let res = await submitOperateRecord(log)
           if (res.data===1||res.status===200){
               this.$message.success('操作成功')
           }else{
               this.$message.error('操作失败')
           }
        }
    },
    props:{
        walkTicket:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
        }
    },
    mounted() {
        fetch('/static/ipConfig.json')
            .then((response) => response.json()) // 解析为 JSON
            .then((data) => {
                this.wxUrl=data.wsbaseUrl// 访问 baseUrl
                this.initWebSocket()
            })
            .catch((error) => {
                console.error('加载配置文件失败:', error);
            });
    },
    watch: {
        walkTicket(newVal) {
            this.localwalkTicket = newVal;
            if (newVal){
                this.currentEvent=undefined
                this.initEventList()
                this.records=[]
            }
        }
    },
})
</script>

<template>
    <el-dialog :title=title   :close-on-click-modal="false" :modal="false"
               :close-on-press-escape="false"  :visible.sync="localwalkTicket" width="30rem" @close="close" custom-class="switchPatrolDialog" >
        <span style="color: #fff;margin-top: 2rem">请选择一个操作任务</span>
        <el-select v-model="currentEvent"  style="height: 5rem;margin-top: 1rem" @change="initContent">
            <el-option v-for="item in eventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <div style="margin-bottom: 1rem;height: 12rem;border: 1px solid rgb(102, 102, 102);overflow: auto;border-radius: 5px">
            <div v-if="records.length!==0">
                <div v-for="(item,index) in records" :key="index" style="margin:.5rem 10px;font-size: 14px;color: #fff">{{item.recordDesc}}</div>
            </div>
            <div v-else style="color: #fff;text-align: center;font-size: 16px;padding: 20%;box-sizing: border-box">暂无数据</div>

        </div>
        <fieldset style="width: 100%;border: 1px solid #666; border-radius: 5px;padding: 2rem;box-sizing: border-box" v-if="title==='预演操作票'">
            <legend style="color: white;margin-left: -1rem;font-size: 16px">预演类型</legend>
            <el-radio-group v-model="currentStyle" style="display: flex; gap: 10px;flex-direction: row;justify-content: center">
                <el-radio label="自动预演" style="color: #fff">自动预演</el-radio>
<!--                <el-radio label="人工预演" style="color: #fff">人工预演</el-radio>-->
            </el-radio-group>
        </fieldset>
        <div class="btns" style="margin-bottom: 1rem;text-align: center">
            <el-button @click="close" style="margin-left: auto" size="mini">取消</el-button>
            <el-button  @click="ok" size="mini" v-if="title==='预演操作票'">确定</el-button>
            <el-button  @click="submitKey" size="mini" v-else>确定</el-button>
        </div>

    </el-dialog>
</template>

<style scoped lang="less">
.el-button{
  color: #ebeff0;
  background: linear-gradient(#176575,#07283f);
  border:0;
  box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
  width: 8rem;
}


.btns{
  margin-top: 1rem;
}
</style>
